import Utils from './Utils.js';
export default class StepNumber{
    static styles=false;
    static STEP_CHANGE_EVENT="step_change_event";
    ids;
    constructor(_data){
        this.data=_data;
        this.num=_data.num;
        this.elem=this.createE();
    }
    createE(){
        if(this.elem) return this.elem;
        //创建外层容器
        let div=Utils.createE("div");
        div.className="item_amount clearfix";
        //左边按钮
        let reduceBtn=Utils.createE("a",{},{
            className:"btn_reduce",
            textContent:"-"
        })
        //输入框
        let input=Utils.createE("input",{},{
            className:"amount_inp",
            type:"text",
            value:this.num,
            //如果state为0，设置input不可输入
            disabled:this.data.state==1?false:true
        })
        //右边按钮
        let addBtn=Utils.createE("a",{},{
            className:"btn_add",
            textContent:"+"
        })
        Utils.appendTo(reduceBtn,div);
        Utils.appendTo(input,div);
        Utils.appendTo(addBtn,div);
        //设置样式
        StepNumber.setStyles();
        //给state为1的商品监听点击事件
        if(this.data.state==1) div.addEventListener("click",e=>this.clickHandler(e));
        return div;
    }
    appendTo(parent){
        Utils.appendTo(this.elem,parent);
    }
    clickHandler(e){
        e.preventDefault();
        let target=e.target;
        //如果点击的元素不是a或者input，直接跳出
        if(target.nodeName!=="A"&&target.nodeName!=="INPUT") return;
        if(Utils.hasClass(target,"btn_reduce")){
            //点击左边的按钮
            this.num--;
            this.setStep(target.nextElementSibling);
        }else if(Utils.hasClass(target,"btn_add")){
            //点击右边的按钮
            this.num++;
            this.setStep(target.previousElementSibling);
        }else if(target.nodeName==="INPUT"){
            //点击input，监听input事件
            target.addEventListener("input",e=>this.inputHandler(e));
        }
    }
    inputHandler(e){
        //采用节流，提高效率
        if(this.ids) return;
        this.ids=setTimeout(()=>{
            clearTimeout(this.ids);
            this.ids=0;
            this.setInputsValue(e.target);
        },500);
    }
    setInputsValue(target){
        let value=target.value;
        //禁止输入非数字
        value=value.replace(/\D/g,"");
        //如果input的value为空，让它等于1
        if(value.length===0) value="1";
        this.num=value;
        this.setStep(target);
    }
    setStep(obj){
        //设置值
        if(this.num<=1) this.num=1;
        if(this.num>=999) this.num=999;
        obj.value=this.num;
        //抛发事件
        let evt=new Event(StepNumber.STEP_CHANGE_EVENT);
        evt.num=this.num;
        evt.data=this.data;
        document.dispatchEvent(evt);
    }
    static setStyles(){
        if(StepNumber.styles) return;
        StepNumber.styles=true;
        Utils.insertCss(".item_amount",{
            width:"90px",
            height:"26px"
        })
        Utils.insertCss(".btn_reduce,.btn_add",{
            display:"block",
            float:"left",
            width:"21px",
            height:"21px",
            lineHeight:"21px",
            textAlign:"center",
            border:"1px solid #ccc",
            color:"#696969",
            textDecoration:"none"
        })
        Utils.insertCss(".amount_inp",{
            float:"left",
            width:"32px",
            height:"19px",
            lineHeight:"20px",
            textAlign:"center",
            margin:"0px 4px",
            padding:"0px"
        })
    }
}
